<template>
    <div>

        <el-form :model="RegUserForm" :rules="RegiFormRules" ref="RegUserForm">
            <h2 class="Regi-title">注册页面</h2>
            <!-- 用户名 -->
            <el-form-item prop="username">
                <el-input v-model="RegUserForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input v-model="RegUserForm.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!-- 确认密码 -->
            <el-form-item prop="password1">
                <el-input v-model="RegUserForm.password1" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
            <!-- 手机号 -->
            <el-form-item prop="phone">
                <el-input v-model="RegUserForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <!-- 选择权限 -->
            <el-form-item label="请选择申请权限:">
                <el-select v-model="RegUserForm.power" placeholder="请选择申请权限">
                    <el-option v-for="(item,index) in PowerList" :key="index" :value='item.pname'>
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 选择权限 -->
            <el-form-item label="请选择所属公司:">
                <el-select v-model="RegUserForm.company" placeholder="请选择所属公司">
                    <el-option v-for="(item,index) in CompList" :key="index" :value='item.name'>
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 获取验证码 -->
            <el-form-item>
                <el-button type="primary" @click='get_code'>点击获取验证码</el-button>
            </el-form-item>
            <!-- 输入验证码 -->
            <el-form-item>
                <el-input v-model="RegUserForm.code" placeholder="请输入手机验证码"></el-input>
            </el-form-item>
            <el-form-item class="El-Button-Submit">
                <el-button type="primary" @click="SubmitReg(`RegUserForm`)">提交</el-button>
                <el-button type="info" @click="ResetReg">重置</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { send_code_post, register_post } from '../axios_api/api'
import { if_username, if_password, if_phone } from '../../config'
export default {
    props: ['PowerList', 'CompList'],
    data() {
        return {
            RegUserForm: {
                username: '',	// 用户名
                password: '',	// 密码
                password1: '',	// 确认密码
                phone: '13140060872',	// 手机号
                power: '',		// 权限
                company: '',	// 公司
                code: '',		// 验证码
            },
            pswd1: false,
            Power: [],
        }
    },
    mounted() {
    },
    computed: {
        RegiFormRules() {
            // 验证用户名
            let username = (rule, value, callback) => {
                // 调用config.js文件中的函数
                if_username(rule, value, callback);
            };
            // 验证密码
            let password = (rule, value, callback) => {
                // 调用config.js文件中的函数
                if_password(rule, value, callback);
            };
            // 验证手机号
            let phone = (rule, value, callback) => {
                // 调用config.js文件中的函数
                if_phone(rule, value, callback);
            };
            return {
                // 绑定验证
                username: [
                    { validator: username, trigger: 'blur' }
                ],
                // 验证密码是否合法
                password: [
                    { validator: username, trigger: 'blur' },
                ],
                // 验证两次密码是否一致
                password1: [
                    { validator: password, trigger: 'blur' },
                ],
                // 手机号验证绑定
                phone: [
                    { validator: phone, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 提交注册
        SubmitReg(RegUserForm) {
						let UserForm = this.RegUserForm;
						// console.log(this.$refs[RegUserForm])
            this.$refs[RegUserForm].validate(valid => {
                if (!valid) return this.$message.error('请完善数据');
                // 遍历将公司名转换成公司id，以便于后端存入数据库
                for (let i = 0; i < this.CompList.length; i++) {
                    // 如果选择的公司名跟数据库中的公司名一样
                    if (this.CompList[i].name === UserForm.company) {
                        // 将comp变量等于该公司的id
                        UserForm.company = String(this.CompList[i].id)
                    }
                }
                // 发起注册提交请求
                register_post(UserForm).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                        this.$router.go(0)
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            })
        },
        // 重置输入数据
        ResetReg() {
            this.$refs.RegiFormRef.resetFields();
        },
        // 获取短信验证码
        get_code() {
            // 正则判断手机号是否合法，如不合法，无法调用获取短信验证码
            if (/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.RegUserForm.phone)) {
                // 将手机号传给后端
                let params = { phone: this.RegUserForm.phone }
                send_code_post(params).then(resp => {
                    if (resp.code === 200) {
                        this.$message.success(resp.message)
                    } else {
                        this.$message.error(resp.message)
                    }
                })
            } else {
                this.$message.error('请输入正确的手机号')
            }

        }
    },
}
</script>

<style>
</style>